<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <jsp:include page="../header.jsp"></jsp:include>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">实时消息</h1>
</header>
<div class="mui-content">
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        <li class="mui-table-view-cell">
            <div class="mui-table">
                <div class="mui-table-cell mui-col-xs-6">
                    <h4 class="mui-ellipsis">滤芯一</h4>
                    <h5>聚丙烯熔喷滤芯</h5>
                    <p class="mui-h6 mui-ellipsis"></p>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">剩余${filterInfo.f1-info.f1Flux}L</span>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">总计${filterInfo.f1}L</span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table">
                <div class="mui-table-cell mui-col-xs-6">
                    <h4 class="mui-ellipsis">滤芯二</h4>
                    <h5>炭棒滤芯</h5>
                    <p class="mui-h6 mui-ellipsis"></p>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">剩余${filterInfo.f2-info.f1Flux}L</span>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">总计${filterInfo.f2}L</span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table">
                <div class="mui-table-cell mui-col-xs-6">
                    <h4 class="mui-ellipsis">滤芯三</h4>
                    <h5>聚丙烯熔喷滤芯</h5>
                    <p class="mui-h6 mui-ellipsis"></p>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">剩余${filterInfo.f3-info.f3Flux}L</span>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">总计${filterInfo.f3}L</span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table">
                <div class="mui-table-cell mui-col-xs-6">
                    <h4 class="mui-ellipsis">滤芯四</h4>
                    <h5>反渗透膜</h5>
                    <p class="mui-h6 mui-ellipsis"></p>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">剩余${filterInfo.f4-info.f4Flux}L</span>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">总计${filterInfo.f4}L</span>
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-table">
                <div class="mui-table-cell mui-col-xs-8">
                    <h4 class="mui-ellipsis">滤芯五</h4>
                    <h5>聚丙烯熔喷</h5>
                    <p class="mui-h6 mui-ellipsis"></p>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">剩余${filterInfo.f5-info.f5Flux}L</span>
                </div>
                <div class="mui-table-cell mui-col-xs-3 mui-text-right">
                    <span class="mui-h5">总计${filterInfo.f5}L</span>
                </div>
            </div>
        </li>
    </ul>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-loop"></span>
        <span class="mui-tab-label">开机</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-close"></span>
        <span class="mui-tab-label">关机</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-arrowthindown"></span>
        <span class="mui-tab-label">强冲</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-plus"></span>
        <span class="mui-tab-label">充值1升</span>
    </a>
</nav>
</body>
<jsp:include page="../footer.jsp"></jsp:include>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
</script>
</html>